
/**
 * index首页
*/
function indexModule(){
    /**
     * 资讯列表
     */
    var newsList = {
        data: function(){
            return {
                newsData: [
                    {
                        title: '专题直击!FPX和G2决战题直击!FPX和G2决战巴黎',
                        span: '2019全球总决赛',
                        img: './images/pifu/1.jpg'
                    },
                    {
                        title: '“阵亡”一次送一个皮肤？Doinb与小苏菲开黑，玩亚索险破产',
                        span: 'daojucheng官方',
                        img: './images/pifu/2.jpg'
                    },
                    {
                        title: '【硬核盘点】提到EDG你第一个想到的是厂长么？',
                        span: '2019全球总决赛',
                        img: './images/pifu/3.jpg'
                    },
                    {
                        title: '努力的韩援都值得肯定！你见过凌晨5点训练的Kramer吗？',
                        span: '2019全球总决赛',
                        img: './images/pifu/4.jpg'
                    },
                    {
                        title: '云顶之弈9.23 伊泽瑞尔翻身极地游侠回归',
                        span: 'daojucheng官方',
                        img: './images/pifu/5.jpg'
                    },
                    {
                        title: '听过的游戏音乐里，隐藏着你哪种未知可能？',
                        span: 'daojucheng官方',
                        img: './images/pifu/6.jpg'
                    },
                    {
                        title: 'Kkoma与阿水领衔！盘点目前六位LPL与LCK的大牌自由人',
                        span: 'daojucheng官方',
                        img: './images/pifu/7.jpg'
                    }
                ]

            }
        },
        methods: {
            clickinformation: function(){
                var node = document.querySelector('.information-module');
                var bodyCon = document.querySelector('.body-content');
                bodyCon.style.overflowY = "hidden";
                node.classList.add('information-module-js');
            }

        },
        template: `
        <div class="news-list" id="news-list">
                <ul>
                    <li v-for="(item, index) in newsData" @click="clickinformation(index)">
                        <a href="javascript:;">
                            <div class="news-list-title">
                                <h3><span>置顶</span>{{ item.title }}</h3>
                                <span>{{ item.span }}</span>
                            </div>
                            <div class="news-list-img">
                                <img :src="item.img" />
                            </div>
                        </a>
                    </li>
                    
                </ul>
                </div>
                `
    }



    /**
     * 搜索
    */ 
    var search = {
        template: `
            <div class="head-search">
                <div class="head-search-btn"><span class="iconfont icon-sousuo"></span>搜索你想了解的资讯</div>
                <div class="head-search-detailed">
                    <div class="head-search-detailed-middle">
                        <div class="search-detailed-top">
                            <div class="search-detailed-input">
                                <span class="iconfont icon-sousuo"></span>
                                <input type="text" placeholder="搜索你想了解的咨询" />
                            </div>
                            <a class="head-search-detailed-remove" href="javascript:;">取消</a>
                        </div>
                        <div class="search-detailed-con">
                            <div class="search-detailed-con-record">搜索历史记录</div>
                            <ul>
                                <li></li>
                            </ul>
                            <div class="search-detailed-con-record-clear">暂无历史搜索记录</div>
                        </div>
                    </div>
                </div>
            </div>
            `
    };





    /**
     * 头部导航栏
    */
    var indexMiddle = {
        template:  `
                <ul class="head-nav-list">
                    <li class="nav-list-li"><a href="javascript:;">推荐</a></li>
                    <li><a href="javascript:;">云端</a></li>
                    <li><a href="javascript:;">总决赛</a></li>
                    <li><a href="javascript:;">新游</a></li>
                </ul>
                `
    };
    var indexNavMiddle = {
        // props: ['navmiddle'],
        components: {
            'tem-navmiddle': indexMiddle
        },
        methods: {
            personal: function(){
                var app = document.querySelector('.app');
                var header = document.querySelector('.header');
                var headUserDetails = document.querySelector('.head-user-details');

                header.style.position = "absolute";
                headUserDetails.classList.add('head-user-details-js');
                addBodyBg(.4, function(node){
            
                    node.addEventListener('click', function(){
                        app.classList.remove('personal-js',);
                        remBodyBg(function(){
                            // 删除body背景 前的回调
                            headUserDetails.classList.remove('head-user-details-js');
                        });
                        var timer = setTimeout(function(){
                            app.style.transition = 'none';
                            clearTimeout(timer);
                        }, 400);
                    });
                });
                app.style.transition = 'left .4s';
                app.classList.add('personal-js');
            }
        },
        template: `
                <div class="header index-header" id="header">
                    <nav class="header-nav">
                        <div class="head-nav-img" @click="personal">
                            <a href="javascript:;"><img src="./images/index/user.jpg" /></a>
                            <!-- 左边个人相关--开始 -->
                        </div>
                        <tem-navmiddle></tem-navmiddle>
                        <div class="head-nav-news"><span class="iconfont icon-xinxi"></span></div>
                    </nav>
                </div>
                `
    }

    /**
     * 资讯详情页
    */
    var information = {
        methods: {
            returnPage: function(){
                var node = document.querySelector('.information-module');
                var bodyCon = document.querySelector('.body-content');
                bodyCon.style.overflowY = "scroll";
                node.classList.remove('information-module-js');
            }
        },
        template: `
            <div class="information-module">
                <div class="inform">
                    <div class="return" @click="returnPage"></div>
                    <div class="pay-text-center">确认购买</div>
                    <div class="inform-right"><span class="iconfont icon-gengduo"></span></div>
                </div>
                <div class="inform-con">
                    <div class="inform-con-title">
                        <h3>FPX夺冠庆典:紫色宝石半价兑换即将限时开始!</h3>
                        <p>daojucheng官方<span>11-20 15:49</span></p>
                    </div></br>
                    <p>亲爱的召唤师：</br></br>

                        庆祝FPX战队在刚刚结束的2019全球总决赛中获得冠军，“FPX夺冠庆典活动十：紫色宝石半价兑换”即将限时开启。</br></br>
                            
                        11月29日10:00至12月2日9:59活动期间，海克斯限定皮肤紫色宝石兑换价格半价(六个月以内新道具除外)。</br></br>
                            
                        现在购买真实伤害法球礼包获真实伤害法球及总决赛2019代币，紫色宝石掉率由20%提升至30%，海克斯限定皮肤掉率由0.04%提升至0.06%，收集代币更可兑换首款路易威登合作皮肤：真实伤害 奇亚娜 至臻。礼包销售截止时间：2019年11月26日9:59。
                    </p></br></br>
                    
                    <img src="./images/pifu/1.jpg"></br></br>

                    紫色宝石限时半价兑换的皮肤列表如下：</br></br>

                    <img src="./images/pifu/2.jpg"></br></br></br></br>

                    <h4>摄魂使者 薇恩</h4></br>

                    <img src="./images/pifu/3.jpg"></br></br></br></br>

                    <h4>恐惧新星 德莱厄斯</h4></br>

                    <img src="./images/pifu/4.jpg"></br></br></br></br>

                    <h4>新创战纪 希维尔</h4></br>

                    <img src="./images/pifu/5.jpg"></br></br></br></br>

                    <p style="text-align: center;">daojucheng科技 马尔扎哈</p></br>
                    <p>祝各位召唤师生活愉悦!</p>
                </div>
            </div>
                `
    };



    // 页面整体
    var indexModuleData = {
        components: {
            'index-nav': indexNavMiddle, // 导航栏
            'news-list': newsList, //资讯列表
            //'tem-banner': temBanner, //轮播
            'tem-search': search, //搜索
            'tem-information': information // 资讯详情页
        },
        template: `
                <div>
                    <index-nav></index-nav>
                    <tem-search></tem-search>
                    <tem-banner></tem-banner>
                    <news-list></news-list>
                    <tem-information></tem-information>
    
                    <nav-personal></nav-personal>
                </div>
                `
    };
    return indexModuleData;

}







